<template>
  <div class='login'>
    <div class='login-title'>{{msg}}</div>
    <x-input
      placeholder="请填写你的座位号并确认!"
      v-model="number"
    />
    <x-button type='primary' @click.native="handleLogin">选择</x-button>
  </div>
</template>

<script>
import { XButton, XInput } from 'vux'
import { mapGetters, mapMutations } from 'vuex'

export default {
  name: 'login',
  components: {
    XButton,
    XInput
  },
  data () {
    return {
      msg: '江南小栈欢迎您来就餐',
      number: ''
    }
  },
  created () {
    if (this.getlogin) {
      this.$router.push('/')
    }
  },
  computed: {
    ...mapGetters({
      getlogin: 'login/getLogin'
    })
  },
  methods: {
    ...mapMutations({
      setLogin: 'login/setLogin'
    }),
    handleLogin () {
      this.setLogin({
        login: this.number
      })
      this.$router.push('/')
    }
  }
}
</script>

<!-- Add 'scoped' attribute to limit CSS to this component only -->
<style scoped lang='less'>
.login {
  &-title {
    margin: 5rem 0;
    text-align: center;
  }
}
</style>
